<!--
 * @Description: GWP列表
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: qingyang
 * @LastEditTime: 2023-06-30 14:24:32
-->
<template>
  <div>
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-button type="primary" @click="addTask" v-btnPermission="'ECI_GWP_ADD'"
          ><CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>新增</el-button
        >
      </template>
      <template #hfcsSlot="{ scope }">
        <CLink @click="seeDetail(scope.row)">详情</CLink>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" :show-more-num="1" />
      </template>
    </CPageTable>
    <add-gwp-dialog
      v-model:visible="addGwpVisible"
      :gwpId="gwpId"
      @refresh="handleRefresh"
    ></add-gwp-dialog>
    <gwp-drawer v-model:visible="gwpDrawerVisible" :gwpId="gwpId"></gwp-drawer>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Gwp'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useGwpList } from './useGwpList';
import { useMessage } from '@/hooks/useMessage';
import AddGwpDialog from './components/AddGwpDialog/index.vue';
import GwpDrawer from './components/GwpDrawer/index.vue';
import { IGwpListResult } from '@/apis/system/config/model/gwpModel';
import { delGwp } from '@/apis/system/config/gwp';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { CLink } from '@/components/CLink/index';

const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useGwpList();
const addGwpVisible = ref(false);
const gwpId = ref('');
const gwpDrawerVisible = ref(false);

const options = reactive<CPageTableProps>({
  title: 'GWP管理',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh }] = useCPageTable(options);

const handleRefresh = () => {
  refresh(true);
};

const addTask = () => {
  gwpId.value = '';
  addGwpVisible.value = true;
};
const seeDetail = (row: IGwpListResult) => {
  gwpDrawerVisible.value = true;
  gwpId.value = row.gwpId;
};
const handleDelete = (row: IGwpListResult) => {
  createConfirm('提示', '删除后不可恢复，是否继续？', {
    iconType: 'warning'
  }).then(() => {
    submitDeleteReq(row.gwpId);
  });
};
const handleEdit = (row: IGwpListResult) => {
  gwpId.value = row.gwpId;
  addGwpVisible.value = true;
};
const submitDeleteReq = async (gwpId: string) => {
  await delGwp(gwpId);
  createMessage.success('删除成功！');
  handleRefresh();
};

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: IGwpListResult): TableButtonItem[] {
  return [
    {
      text: '编辑',
      btnPermission: 'ECI_GWP_EDIT',
      onClick: () => handleEdit(row)
    },
    {
      text: '删除',
      btnPermission: 'ECI_GWP_DELETE',
      onClick: () => handleDelete(row)
    }
  ];
}
</script>
